<template>
  <div>
      <h3 class="info-title">{{info.title}}</h3>
      <p class="info-subtitle">
         <span>发表时间：{{info.add_time | dateFormat}}</span>
         <span>点击{{info.click}}次</span>
      </p>
      <hr>
      <!-- 缩略图区域 -->
      <div class="sltu">
          <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
      </div>
     
      <!-- 内容区域 -->
      <div v-html="info.content" class="info-content"></div>
      <com-xt :id="id"></com-xt>
  </div>
</template>


<script>
import comment from '../subcomponent/moment.vue'//导入评论组件
export default {
  data(){
      return {
          id:this.$route.params.id,

          info:{},//存放图片详情数据
          list:[]//存放缩略图数据
      }
  },
  created(){
      this.getimageInfo()
      this.getthumimages()  
  },
  methods:{
      getimageInfo(){//获取图片详情
          this.$http.get("api/getimageInfo/"+this.id).then(result => {
            
              if(result.body.status===0){
                
                  this.info=result.body.message[0]
              }
          })
      },
      getthumimages(){//获取缩略图
        this.$http.get("api/getthumimages/"+this.id).then(result =>{
            if(result.body.status===0){
                //循环遍历每一项  加宽度和高度
                result.body.message.forEach(item =>{
                    item.w=600;
                    item.h=400
                });
                this.list=result.body.message
            }
            
        })

      }
  },
  components:{
      'com-xt':comment
  }
}
</script>


<style lang="less" scoped>
.info-title{
    font-size:18px;
    text-align: center;
    
}
.info-subtitle{
       font-size:12px;
       display: flex;
       justify-content: space-between;
       color:#226eff;
}
.info-content{
    font-size: 13px;
    line-height: 30px;
}
.sltu{
    img{
        margin:10px;
        box-shadow:0 0 5px #333;
    }
}
</style>
